<template>
	<div>
		<!--查询部分-->
		<el-row>
	<!--		<el-col :span="1">
				<p class="queryLabel">编号名称：</p>
			</el-col>
			<el-col :span="3" style="padding-left: 10px;">
				<el-input v-model="queryData.numberName" size="small" placeholder="请输入编号"></el-input>
			</el-col>-->
			<!--<el-col :span="1" style="padding-left: 1px;">
				<el-button size="small" type="primary" @click="queryButton">查 询</el-button>
			</el-col>-->
			<el-col :span="1" style="margin-left: 600px;">
				<el-button size="small" type="primary" @click="addButton">新 增</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="editButton">编 辑</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="startButton">启 用</el-button>
			</el-col>
			<el-col :span="1" style="padding-left: 10px;">
				<el-button size="small" type="primary" @click="stopButton">停 用</el-button>
			</el-col>
		</el-row>
		
		<!--表格部分-->
		<el-row>
			<el-col :span = "24">
				<el-table :data="tableData.dataList" stripe border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50">
					</el-table-column>
					<el-table-column label = "工单消费类型" width="220" :formatter="gdxfCov"></el-table-column>
					<el-table-column label = "关联类型" width="220" :formatter="gllxCov"></el-table-column>
					<el-table-column label = "关联关系" width="220" :formatter="glgxCov"></el-table-column>
					<el-table-column prop="refValue" label = "关联值" width="220"></el-table-column>
					<el-table-column prop="dispOrder" label = "优先级" width="220"></el-table-column>
					<el-table-column label = "状态" width="220" :formatter="statusCov"></el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" @current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total,prev, pager, next" :total="tableData.total"></el-pagination>
			</el-col>
		</el-row>
		
		<el-dialog title="新增" v-model="addDialogShow" size = "tiny">
			
			<el-form :model="editData" :rules="rules" ref="editData" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="工单类型" prop="xfType">
			   		<el-select size="small" v-model="editData.xfType" placeholder="请选择">
						<el-option v-for="item in ItemTypeCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
			  </el-form-item>
			   <el-form-item label="关联类型" prop="refType">
			  		<el-select size="small" v-model="editData.refType" placeholder="请选择">
						<el-option v-for="item in gllxCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
			  </el-form-item>
			   <el-form-item label="关联关系" prop="refRel">
			  		<el-select size="small" v-model="editData.refRel" placeholder="请选择">
						<el-option v-for="item in glgxCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
			  </el-form-item>
			   <el-form-item label="关联值" prop="refValue">
			  		<el-input v-model="editData.refValue" size="small" placeholder="请输入关联值"></el-input>
			  </el-form-item>
			  
			   <el-form-item label="优先级" prop="dispOrder">
			  		<el-input type="number" v-model="editData.dispOrder" size="small" placeholder="请输入优先级"></el-input>
			  </el-form-item>
			  
			</el-form>
			<el-row>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 100px;" @click="addSubmit('editData')">提 交</el-button>
				</el-col>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 70px;" @click="addCansel">取 消</el-button>
				</el-col>
			</el-row>
		</el-dialog>
		
		<el-dialog title="编辑" v-model="editDialogShow" size = "tiny">
			
			<el-form :model="editData" :rules="rules" ref="editData" label-width="100px" class="demo-ruleForm">
			  <el-form-item label="工单类型" prop="xfType">
			   		<el-select size="small" v-model="editData.xfType" placeholder="请选择">
						<el-option v-for="item in ItemTypeCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
			  </el-form-item>
			   <el-form-item label="关联类型" prop="refType">
			  		<el-select size="small" v-model="editData.refType" placeholder="请选择">
						<el-option v-for="item in ItemTypeCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
			  </el-form-item>
			   <el-form-item label="关联关系" prop="refRel">
			  		<el-select size="small" v-model="editData.refRel" placeholder="请选择">
						<el-option v-for="item in ItemTypeCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
			  </el-form-item>
			   <el-form-item label="关联值" prop="refValue">
			  		<el-input v-model="editData.refValue" size="small" placeholder="请输入关联值"></el-input>
			  </el-form-item>
			  
			   <el-form-item label="优先级" prop="dispOrder">
			  		<el-input type="number" v-model="editData.dispOrder" size="small" placeholder="请输入优先级"></el-input>
			  </el-form-item>
			  
			</el-form>
			
			<el-row>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 100px;" @click="editSubmit('editData')">提 交</el-button>
				</el-col>
				<el-col :span="12">
					<el-button type="primary" size="small" style="margin-left: 70px;" @click="editCansel">取 消</el-button>
				</el-col>
			</el-row>
		</el-dialog>
		
		
	</div>
</template>

<script>
	export default {
		data:function(){
			return{
				// 规则
				 rules: {
		          xfType: [
		            { required: true, message: '请输入工单类型', trigger: 'blur' }
		           
		          ],
		           refType: [
		            { required: true, message: '请输入关联类型', trigger: 'blur' }
		           
		          ],
		          refRel:[
		          { required: true, message: '请输入关联关系', trigger: 'blur' }
		          
		          ],
		           refValue:[
		          { required: true, message: '请输入关联值', trigger: 'blur' }
		          ],
		          dispOrder:[{
		          	required: true, message: '请输入优先级', trigger: 'blur' 
		          }],
		          
				 },
				// 工单类型下拉
				ItemTypeCombo:[{
					value:"zf",
					label:"自费",
				},{
					value:"df",
					label:"垫付",
				},{
					value:"sp",
					label:"索赔",
				},],
				// 关联类型下拉
				gllxCombo:[{
					value:"wxlb",
					label:"维修类别",
				},{
					value:"wxxm",
					label:"维修项目",
				},],
				// 关联关系下拉
				glgxCombo:[{
					value:"xd",
					label:"相等",
				},{
					value:"bh",
					label:"包含",
				}],
				// 新增dialog显示
				addDialogShow:false,
				//  编辑dialog 显示
				editDialogShow:false,
				// 查询集合
				queryData:{
					numberName:"",
				},
				CurentPage: 1,
				page: this.page,
				// 查询数据
				tableData:{
					total:0,
					dataList:[],
				},
	
				// 修改数据
				editData:{
					xfType:"",
					refType:"",
					refRel:"",
					refValue:"",
					dispOrder:"",
					status:"",
					companyId:"",
					id:"",
					createTime:"",
					createUser:"",
					updateUser:"",
					updateTime :"",
					
				},
				// 修改数据初始化
				emptyEditData:{
					xfType:"",
					refType:"",
					refRel:"",
					refValue:"",
					dispOrder:"",
					status:"",
					companyId:"",
					id:"",
					createTime:"",
					createUser:"",
					updateUser:"",
					updateTime :"",
					
				},
				// 选择数据
				multipleSelection:"",
				
			}
		},
		methods:{
			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
				/*if(this.$data.multipleSelection.length > 1)
					this.$message.error("请选择一条数据！");*/
			},
			// 查 询 
			queryButton:function(){
				//alert("查询");
				debugger;
				this.$http.get(this.API_ROOT + '/crm/wo/xftype/page', {
					params: {
						//levelCode:this.$data.queryData.numberName,
						start:this.CurentPage,
						limit: this.$data.page.pageSize,
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData.dataList = resp.data.dataList;
						this.$data.tableData.total = resp.data.total;
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {
				});
			},
			// 添加按钮
			addButton:function(){
				//alert("新增");
				this.$data.editData = Object.assign(this.$data.editData, this.$data.emptyEditData);
				this.$data.addDialogShow = true;
			},
			
			/**编辑按钮**/
			editButton:function(){
				if(this.$data.multipleSelection.length != 1){
					this.$message.error("请选择一条数据");
					return;
				}
				//alert("编辑");
				this.$data.editData = Object.assign(this.$data.editData, this.$data.emptyEditData);
				this.getDataById();
				this.$data.editDialogShow = true;
			},
			// 编辑获取选中信息
			getDataById:function(){
				debugger;
				this.$http.get(this.API_ROOT + '/crm/wo/xftype/info', {
					params: {
						id:this.$data.multipleSelection[0].id,
					}
				}).then(resp => {
					if(resp.data.success) {

						//this.$message(resp.data.msg);
						this.$data.editData.xfType = resp.data.data.xfType;
						this.$data.editData.refType = resp.data.data.refType;
						this.$data.editData.id = resp.data.data.id;
						this.$data.editData.dispOrder = resp.data.data.dispOrder.toString();
						this.$data.editData.status = resp.data.data.status;
						this.$data.editData.refRel = resp.data.data.refRel;
						this.$data.editData.refValue = resp.data.data.refValue;
						this.$data.editData.companyId = resp.data.data.companyId;
						
					} else {
						//this.$message.error(resp.data.msg);
					}
				}, resp => {
				});
			},
			// 启用
			startButton:function(){
				//alert("启用");
				if(this.$data.multipleSelection.length != 1){
					this.$message.error("请选择一条数据");
					return;
				}
				this.$http.get(this.API_ROOT + '/crm/wo/xftype/start', {
					params: {
						id:this.$data.multipleSelection[0].id,
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					} else {
						this.$message.error(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					}
				}, resp => {
				});
			},
			// 停用
			stopButton:function(){
				//alert("停用");
				if(this.$data.multipleSelection.length != 1){
					this.$message.error("请选择一条数据");
					return;
				}
				this.$http.get(this.API_ROOT + '/crm/wo/xftype/stop', {
					params: {
						id:this.$data.multipleSelection[0].id,
					}
				}).then(resp => {
					if(resp.data.success) {
						this.$message(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					} else {
						this.$message.error(resp.data.msg);
						this.queryButton(); // 刷新
						this.$data.multipleSelection = []; // 选择置空
					}
				}, resp => {
				});
			},
			/**【添加】提交**/
			addSubmit:function(formName){
				
				this.$refs[formName].validate((valid) => {
		          if (valid) {
				
					//alert("新增提交");
					this.$http.post(this.API_ROOT + '/crm/wo/xftype/save',this.$data.editData ,{
						params: {
						}
					}).then(resp => {
						if(resp.data.success) {
							resp.data.total = parseInt(resp.data.total);
							this.$data.tableData.dataList = resp.data.dataList;
							this.$data.tableData.total = resp.data.total;
							this.$data.addDialogShow = false;
							this.$message("保存成功！");
							this.queryButton();
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {
					});
				
				} else {
		            this.$message.error("表单填写不全！");
		            return false;
		         }
		        });
				
			},
			/**【添加】取消**/
			addCansel:function(){
				//alert("新增取消");
				this.$data.addDialogShow = false;
			},
			
			/** 【编辑】提交 **/
			editSubmit:function(formName){
				
				this.$refs[formName].validate((valid) => {
		          if (valid) {
				
					//alert("新增提交");
					this.$data.editData.id = this.$data.multipleSelection[0].id;
					this.$http.post(this.API_ROOT + '/crm/wo/xftype/save',this.$data.editData ,{
						params: {
						}
					}).then(resp => {
						if(resp.data.success) {
							resp.data.total = parseInt(resp.data.total);
							this.$data.tableData.dataList = resp.data.dataList;
							this.$data.tableData.total = resp.data.total;
							this.$data.editDialogShow = false;
							this.$message("保存成功！");
							this.queryButton();
						} else {
							this.$message.error(resp.data.msg);
						}
					}, resp => {
					});
				
				} else {
		            this.$message.error("表单填写不全！");
		            return false;
		         }
		        });
				
			},
			/**【编辑】 取消**/
			editCansel:function(){
				//alert("新增取消");
				this.$data.editDialogShow = false;
			},
			
			//列表分页大小切换
			handleSizeChange: function() {},
			//列表当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.queryButton();
			},
			// 状态转换
			statusCov:function(row){
				switch (row.status) {
					case '0':
					return "未启用";
					break;
					case '1':
					return "已启用";
					break;
					default:
					return "状态未知";
					break;
					
				}
			},
			// 工单消费类型转换
			gdxfCov:function(row){
				switch (row.xfType){
					case 'zf':
					return "自费";
					break;
					
					case 'df':
					return "垫付";
					break;
					
					case 'sp':
					return "索赔";
					break;
					
					default:
					return "未知";
					break;
					
				}
			},
			// 关联类型转换
			gllxCov:function(row){
				switch (row.refType){
					case 'wxlb':
					return "维修类别";
					break;
					
					case 'wxxm':
					return "维修项目";
					break;
					
					default:
					return "未知";
					break;
					
				}
			},
			// 关联关系转换
			glgxCov:function(row){
				switch (row.refRel){
					case 'xd':
					return "相等";
					break;
					
					case 'bh':
					return "包含";
					break;
					
					default:
					return "未知";
					break;
					
				}
			}
		},
		created:function(){
			this.queryButton();
		}
	}
</script>

<style>
</style>